<template>
  <!--头部部分-->
  <div class = "header">
    <!--左边 -->
    <div class = "left">
      <!--logo-->
      <div class = "logo-div">
        <img alt = "logo" class = "logo" :src = "logo">
        <span class = "title">网易云音乐</span>
      </div>
      <!--前进、后退、搜索框-->
      <NextBackAndSearch :text-color = "headerTextColor" />
    </div>
    <!--右边-->
    <!--:text-color = "props.textColor"-->
    <SettingAndClosing :text-color = "headerTextColor" />
  </div>


</template>

<script setup>
import logo from '@/assets/logo.png'
import NextBackAndSearch from "@/components/reuse/NextBackAndSearch";
import SettingAndClosing from "@/components/reuse/SettingAndClosing";
import {computed} from "vue";
import store from "@/store";

//这个值存到Vuex中 如果变换主题色为白色，就去Vuex中变化这个值
const headerTextColor = computed(() => store.state.UserInterface.headerTextColor)

</script>

<style lang = "less" scoped>
.header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 15px;
  height: 60px;
  background-color: var(--main-color);

  div {
    display: flex;
    align-items: center;
    height: 100%;
  }


  .left {
    .logo-div {
      margin-right: 20px;
      cursor: pointer;

      .title {
        color: v-bind('headerTextColor');
        font-size: large;
        font-weight: 500;
        padding-left: 10px;
      }

    }

  }


}

.logo {
  height: 50%;
}


</style>